<template>
  <div
    class="web_nav_con flex items-center justify-center sm:hidden fixed top-0 left-0 w-full right-0 z-50 h-20 bg-slate-400"
  >
    <div v-for="item in navList" :key="item.id" class="mr-4">
      <MyLink to="/" @click="(e) => navClick(e, item)">{{ item.name }}</MyLink>
    </div>
    <div
      v-show="menuList && menuList.length"
      class="fixed top-0 left-0 w-full h-[100vh] animateO bg-black/50"
    >
      <div
        v-show="menuList && menuList.length"
        id="leftNavCon"
        :class="
          $cn(
            'relative -translate-x-[100%] inline-block px-6 bg-white whitespace-nowrap overflow-hidden'
          )
        "
      >
        <div
          @click="closeNav"
          class="text-black z-50 border-black/55 hover:text-theme hover:border-theme duration-300 w-7 h-7 border rounded-full text-2xl font-normal text-center leading-7 absolute right-3 top-3 cursor-pointer"
        >
          X
        </div>
        <div class="main_nav h-[100vh] flex flex-col">
          <div class="nav_title p-4">
            {{ currenNav.name }}
          </div>
          <div class="flex-1">
            <WebNavLeft :nav-list="menuList" :select="initId"></WebNavLeft>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import gsap from "gsap";
const props = defineProps({
  navList: {
    type: Array<any>,
    required: true,
  },
  initId: {
    type: String,
    default: "1-2",
  },
});

const currenNav = ref<any>({});

const navClick = (e: Event, item: any) => {
  e.preventDefault();
  currenNav.value = item;
  gsap.to("#leftNavCon", {
    x: 0,
    duration: 0.5,
    onComplete: () => {
      // currenNav.value = {};
    },
  });
};
const closeNav = () => {
  gsap.to("#leftNavCon", {
    x: "-100%",
    duration: 0.5,
    onComplete: () => {
      currenNav.value = {};
    },
  });
};
const menuList = computed(() => {
  return currenNav.value.children || [];
});
</script>
<style lang="scss" scoped>
.animateW {
  animation: aniW 0.5s ease;
  @keyframes aniW {
    from {
      transform: translateX(-100%);
    }
    to {
    }
  }
}
.animateO {
  animation: anio 0.5s ease;
  @keyframes anio {
    from {
      opacity: 0;
    }
    to {
    }
  }
}
</style>
